<template>
  <div class="searchStyle">
    <form @submit.prevent="change(keywords)">
      <div class="input">
        <i></i>
        <input
          type="text"
          placeholder="搜索歌曲，歌手，专辑"
          @input="show"
          v-model="keywords"
        />
        <i
          class="u-svg u-svg-empty"
          :class="{ zshow: keywords }"
          @click="clearKeywords"
        ></i>
      </div>
    </form>
    <component
      :is="search"
      :keywords="keywords"
      @change="change"
      @play="$emit('play', $event)"
    ></component>
    <div class="clearBoth"></div>
    <!-- 搜索历史 -->
    <div class="searchHistory" v-show="isShow">
      <div class="th">
        <BorderTitle>搜索历史</BorderTitle>
        <p class="txt" @click="empty">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-trash"
            viewBox="0 0 16 16"
          >
            <path
              d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
            />
            <path
              fill-rule="evenodd"
              d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
            />
          </svg>
        </p>
      </div>
      <div v-if="stoageHistory.length == 0" class="wu">暂无记录</div>
      <div class="td">
        <p v-for="(item, index) in stoageHistory" :key="index">
          <span class="clock">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              fill="currentColor"
              class="bi bi-clock-history"
              viewBox="0 0 16 16"
            >
              <path
                d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"
              />
              <path
                d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"
              />
              <path
                d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"
              />
            </svg>
          </span>
          <span  @click="change(item)">{{ item }}</span>

          <span class="del" @click="del(index)">X</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import HotSearch from "@/components/HotSearch.vue";
import SearchSuggest from "@/components/SearchSuggest.vue";
import SearchResult from "@/components/SearchResult.vue";
import BorderTitle from "@/components/BorderTitle";

export default {
  name: "Recommend",
  data() {
    return {
      search: "HotSearch",
      keywords: "",
      inputing: false,
      stoageHistory: [],
      isShow: true,
    };
  },
  mounted() {
    if (JSON.parse(localStorage.getItem("stoageHistory"))) {
      this.stoageHistory = JSON.parse(localStorage.getItem("stoageHistory"));
    }
  },
  components: {
    HotSearch,
    SearchResult,
    SearchSuggest,
    BorderTitle,
  },
  watch: {
    keywords(val) {
      if (val == "") {
        this.search = "HotSearch";
      } else if (this.inputing) {
        this.search = "SearchSuggest";
      }
    },
  },

  methods: {
    clearKeywords() {
      this.keywords = "";
      this.isShow = true;
    },

    change(val) {
      this.isShow = false;
      this.keywords = val;
      this.inputing = false;
      this.search = "SearchResult";
      // console.log(this.stoageHistory)
      if (!this.stoageHistory.includes(this.keywords)) {
        this.stoageHistory.unshift(this.keywords);
        localStorage.setItem(
          "stoageHistory",
          JSON.stringify(this.stoageHistory)
        );
      } else {
        let i = this.stoageHistory.indexOf(this.keywords);
        this.stoageHistory.splice(i, 1);
        this.stoageHistory.unshift(this.keywords);
        localStorage.setItem(
          "stoageHistory",
          JSON.stringify(this.stoageHistory)
        );
      }
    },
    show() {
      this.inputing = true;
      if (this.keywords == "") {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    empty() {
      let con = confirm("确定清空搜索历史？");
      if (con == true) {
        // this.$toast.success("清空历史搜索成功");
        localStorage.removeItem("stoageHistory");
        this.stoageHistory = [];
      }
    },
    del(index) {
      this.stoageHistory.splice(index, 1);
      localStorage.setItem("stoageHistory", JSON.stringify(this.stoageHistory));
    },
  },
};
</script>
<style lang="less">
.searchStyle {
  form {
    width: 95%;
    margin: 0 auto;
    border-bottom: 1px solid #eff0f1;
    //  text-align: center;
  }
  .input {
    position: relative;
    width: 100%;
    height: 33px;
    padding-left: 38px;
    box-sizing: border-box;
    background: #ebecec;
    border-radius: 30px;
    align-items: center;
    margin: 15px 0;

    i:first-child {
      position: absolute;
      display: inline-block;
      width: 15px;
      height: 15px;
      top: 8px;
      left: 10px;
      background-image: url();
      background-size: 16px;
    }
    input {
      flex: 1;
      background-color: transparent;
      outline: none;
      border: none;
      line-height: 35px;
      font-size: 14px;
      // color: #c9c9c9;
      width: 100%;
      position: relative;
    }
    .zshow {
      display: block !important;
    }
    .u-svg {
      display: none;
      position: absolute;
      right: 8px;
      top: 10px;
      width: 30px;
      vertical-align: middle;
      width: 14px;
      height: 14px;
      background-image: url();
      background-position: 0 0;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .clearBoth {
    clear: both;
  }
  .searchHistory {
    margin-top: 10px;
    .th {
      display: flex;
      justify-content: space-between;
      // margin-bottom: 10px;
      align-items: center;
      font-size: 15px;
      font-weight: 600;
      .txt {
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 15px;
      }
    }
    .wu {
      color: grey;
      text-align: center;
    }
    .td {
      padding: 0px 10px;
      box-sizing: border-box;
      // display: flex;
      flex-wrap: wrap;
      // margin: 5px 0px;
      p {
        margin-top: 10px;
        border-bottom: 1px solid #ddd;
        padding: 5px;
        // border-radius: 15px;
        color: grey;
        // height: 35px;
        line-height: 35px;
        position: relative;
        .clock {
          position: absolute;
          top: 8px;
          left: 0;
        }
        :nth-child(2) {
          margin-left: 25px;
          display: inline-block;
          width: 80%;
        }
        .del {
          float: right;
          padding-left: 20px;
        }
      }
    }
  }
}
</style>